<template>
    <a-modal title="同步飞书模板" :bodyStyle="{ padding: 0 }" centered v-model:visible="visible" :width="600" v-if="visible">
        <div style="padding: 32px">
            <a-form layout="inline">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="选择模板">
                            <flexbox>
                                <div style="flex: 1; overflow: hidden">
                                    <a-select v-model:value="checkedFsId">
                                        <a-select-option v-for="item of tempOptions" :key="item.id">
                                            {{ item.fsFileName }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                                <a-button type="dashed" style="flex-shrink: 0" class="primary-color margin-l-8" @click="handleAddTemp">
                                    <template #icon><PlusOutlined /></template>
                                    <span>添加模板</span>
                                </a-button>
                            </flexbox>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <template #footer>
            <flexbox justify="flex-end" class="btn-group">
                <a-button type="primary" @click="handleSubmit" :disabled="!checkedFsId">同步</a-button>
            </flexbox>
        </template>
    </a-modal>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import { HSearchSelectCell } from '@/components';
import { PlusOutlined } from '@ant-design/icons-vue';
import { useMessage } from '@/hooks/common/useMessage';
import { useRouter } from 'vue-router';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HSearchSelectCell,
        PlusOutlined
    },
    emits: ['success'],
    setup(_, { emit }) {
        const router = useRouter();
        const state = reactive<Recordable>({
            visible: false,
            detailData: {},
            checkedFsId: null,
            tempOptions: []
        });
        const open = (detailData) => {
            state.detailData = detailData;
            state.checkedFsId = null;
            state.visible = true;
            getFsFileSyncTmplOptions();
        };
        // 获取模板接口
        const getFsFileSyncTmplOptions = async () => {
            const query = {
                catalogCode: state.detailData.pmpProductDetailDTO.catalogCode
            };
            const { success, moule } = await api.fsFileSyncTmplModel.getTmplByProductCatalogCode(query);
            if (success) {
                state.tempOptions = [...moule];
            }
        };
        const handleSync = async () => {
            emit('success', state.checkedFsId);
            state.visible = false;
        };
        const handleSubmit = () => {
            handleSync();
        };
        // 通用选择回调
        const handleSelectChange = (val) => {
            if (val.id) {
                state.checkedData = { ...val };
            }
        };

        const handleAddTemp = () => {
            router.push({
                path: '/tool/feishu'
            });
            state.visible = false;
        };

        return {
            ...toRefs(state),
            open,
            handleSubmit,
            handleSelectChange,
            handleAddTemp
        };
    }
});
</script>
<style scoped lang="less">
::v-deep(.ant-select) {
    max-width: 100% !important;
}
</style>